<template>
  <div class="inputWrapper">
    <input
      :type="type"
      :placeholder="placeholder"
      v-model="iptval"
      :class="{
                success:isval,
                error:!isval          
            }"
      @blur="checkiptval"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      iptval: "",
      isval: true,
    };
  },
  props: ["type", "placeholder", "rule", "msg"],
  watch: {
    iptval(newval) {
      if (this.rule.test(newval)) {
        this.isval = true;
        // console.log("合法");
      } else {
        this.isval = false;
        // console.log(this.msg);
      }
      this.$emit("valchange", newval);
    },
  },
  methods: {
    checkiptval() {
      if (!this.isval) {
        // alert(this.msg)
        this.$toast.fail(this.msg);
      }
    },
  },
};
</script>
<style lang='less' scoped>
.inputWrapper {
  padding-bottom: 16/360 * 100vw;
  input {
    width: 100%;
    height: 48/360 * 100vw;
    line-height: 48/360 * 100vw;
    font-size: 18/360 * 100vw;
    border-color: #fff;
    border: none;
    outline: none;
    border-bottom: 1px solid #333;
  }
  .success {
    border-color: green;
  }
  .error {
    border-color: red;
  }
}
</style>